<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./build/react.js"></script>
	<script src="./build/react-dom.js"></script>
	<script src="./build/browser.min.js"></script>
</head>
<body>
	<div id="example"></div>
	<script type="text/babel">

		var MyTitle = React.createClass({
			propTypes:{

			},
			render:function(){
				return <h1>hello,{this.props.title}</h1>
			}
		});
		ReactDOM.render(
			<div>
				<MyTitle key="1" title="xiaoming"></MyTitle>
				<MyTitle key="2"></MyTitle>
			</div>,
			document.querySelector('#example')
		)
	</script>
</body>
</html>


<!-- <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./build/react.js"></script>
	<script src="./build/react-dom.js"></script>
	<script src="./build/browser.min.js"></script>
</head>
<body>
	<div id="example"></div>
	<script type="text/babel">
		const data = 666;
		var MyTitle = React.createClass({
			getDefaultProps:function(){
				return {
					title:'default'
				}
			},
			propTypes:{
				title:React.PropTypes.string.isRequired
			},
			render:function(){
				return <h1>hello,{this.props.title}</h1>;
			}
		});

		ReactDOM.render(
			<div>
				<MyTitle key="1" title='xiaoming'></MyTitle>
				<MyTitle key="2"></MyTitle>
			</div>,
			document.querySelector('#example')
		)
	</script>
</body>
</html> -->
<!--
	组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

	组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求（查看 demo06）。


	var MyTitle = React.createClass({
	  propTypes: {
	    title: React.PropTypes.string.isRequired,
	  },

	  render: function() {
	     return <h1> {this.props.title} </h1>;
	   }
	});
	上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。


	var data = 123;

	ReactDOM.render(
	  <MyTitle title={data} />,
	  document.body
	);
	这样一来，title属性就通不过验证了。控制台会显示一行错误信息。


	Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.
	更多的PropTypes设置，可以查看官方文档。

	此外，getDefaultProps 方法可以用来设置组件属性的默认值。


	var MyTitle = React.createClass({
	  getDefaultProps : function () {
	    return {
	      title : 'Hello World'
	    };
	  },

	  render: function() {
	     return <h1> {this.props.title} </h1>;
	   }
	});

	ReactDOM.render(
	  <MyTitle />,
	  document.body
	);
	上面代码会输出"Hello World"。
 -->
